<template>
  <div class="h-full flex flex-col justify-between">
    <!-- 工具栏 -->
    <div class="list-toolbar flex justify-between items-center h-[96px]">
      <div class="text-main-content">共 {{ total }} 条记录</div>
      <div class="flex">
        <el-input
          v-model="searchStr"
          placeholder="输入关键字查询"
          class="rounded-content-wrap mr-[10px]"
          clearable
          @change="handleSearch"
        >
          <template #prefix>
            <i class="el-icon-search el-input__icon text-[20px]"></i>
          </template>
        </el-input>
        <!-- <el-button class="rounded-content-wrap" type="primary" plain
          >批量导出</el-button
        > -->
        <el-button
          class="rounded-content-wrap"
          type="primary"
          @click="handleAdd"
          >新增土地</el-button
        >
      </div>
    </div>
    <!-- 列表 -->
    <div class="flex-1 overflow-y-auto">
      <el-table
        ref="table"
        v-loading="loading"
        row-key="id"
        show-overflow-tooltip
        :data="dataList"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          reserve-selection
          width="50px"
          type="selection"
        ></el-table-column>

        <el-table-column min-width="300px" prop="data.name" label="土地名称">
          <template #default="{ row }">
            <div class="flex items-center space-x-4">
              <el-image
                class="rounded-[4px] w-[42px] h-[42px] flex-none"
                :src="getFirstImage(row)"
                fit="fill"
              ></el-image>
              <span>{{ row.data.name }}</span>
              <el-tag v-if="row.data.invalid" size="mini" type="danger"
                >已失效</el-tag
              >
            </div>
          </template>
        </el-table-column>

        <el-table-column min-width="100px" prop="data.area" label="土地面积">
          <template #default="{ row }">
            <span>{{ row.data.area }}亩</span>
          </template>
        </el-table-column>

        <el-table-column
          min-width="100px"
          prop="data.typeLabel"
          label="土地类型"
        ></el-table-column>

        <el-table-column min-width="100px" prop="data.price" label="土地价格">
          <template #default="{ row }">
            <span>{{ row.data.price }}亿元</span>
          </template>
        </el-table-column>

        <el-table-column
          min-width="100px"
          prop="updatedTime"
          label="更新时间"
        ></el-table-column>

        <el-table-column width="100px" label="操作">
          <template #default="{ row }">
            <div class="space-x-1">
              <a @click="edit(row._id)">编辑</a>
              <span>|</span>
              <el-popconfirm title="确定删除吗？" @confirm="del(row._id)">
                <a slot="reference">删除</a>
              </el-popconfirm>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页器 -->
    <div
      class="
        flex-none
        border-t border-solid border-gray-200
        h-[104px]
        flex
        items-center
        justify-between
      "
    >
      <div class="flex items-center space-x-2">
        <div>
          第 <b>{{ `${pagination.pageNum}/${total}` }}</b> 页
        </div>
        <div>
          已选中 <b>{{ selected.length }}</b> 条记录
        </div>
      </div>
      <div>
        <el-pagination
          layout="total, prev, pager, next, jumper"
          :current-page.sync="pagination.pageNum"
          :total="total"
          :page-size.sync="pagination.pageSize"
          @current-change="fetchData()"
          @size-change="fetchData()"
        ></el-pagination>
      </div>
    </div>

    <AddEditLand ref="addEdit" @onRefresh="fetchData()" />
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import tableMixin from '../common/tableMixin'
import AddEditLand from './AddEditLand.vue'
export default Vue.extend({
  components: { AddEditLand },
  mixins: [tableMixin('B_CONSOLE_LAND')],
  head: {
    title: '土地列表',
  },
  methods: {},
})
</script>
<style lang="scss" scoped>
::v-deep .el-input__inner {
  @apply rounded-content-wrap;
}
</style>
